<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css" media="all">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    <script src="../static/js/jquery-3.6.js"></script>
    <!--  图标库  -->
    <link href="../static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/cinui.css" media="all"/>
</head>
<body>


<!--blogViews-->
<ul class="flow-default" id="LAY_demo1"></ul>
<!--/**首页博客显示**/-->
<script>

    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            ,isAuto: true
            ,isLazyimg: true
            , done: function (page, next) { //加载下一页

                //模拟数据插入
                $.post('queryBlogStatusList', function (data) {
                    var demo = JSON.parse(data);//将json拆分
                    setTimeout(function () {
                        var lis = [];
                        var j = 5;//一页显示的数量
                        for (var i = -1; i < j; i++) {
                            lis.push('<div class="layui-row" style="margin-top: 1%;padding: 5px;">\n' +
                                '    <div class="layui-col-lg8 layui-col-md8 layui-col-sm12 layui-col-xs12  layui-col-lg-offset2 layui-col-md-offset2">\n' +
                                '        <div class="layui-panel">\n' +
                                '            <div class="layui-card-header" style="padding: 20px 30px;">\n' +
                                '                <b class="blogTitle layui-col-lg4 layui-col-md4 layui-col-sm4 layui-col-xs4"><a href="javascript:;">' + demo[(page - 1) * j + i + 1].blogTitle + '</a></b>\n' +
                                '                <span class="blogTitle layui-col-lg2 layui-col-md2 layui-col-sm2 layui-col-xs2 layui-col-lg-offset2 layui-col-md-offset2  layui-col-sm-offset2 layui-col-xs-offset2" style="background: rgba(243,240,240,0.69);padding: 8px 8px;border-radius: 10px;">' + demo[(page - 1) * j + i + 1].blogMemo + '</span>\n' +
                                '            </div>\n' +
                                '            <div class="layui-card-body">\n' +
                                '                <div class="value">\n' +
                                '                    ' + demo[(page - 1) * j + i + 1].blogValue + '\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-card-header blogMemo" style="padding: 5px 30px;">\n' +
                                '                <span>' + demo[(page - 1) * j + i + 1].userName + '</span>\n' +
                                '                &nbsp;&nbsp;<i class="fa fa-code"></i>&nbsp;&nbsp;\n' +
                                '                <span>' + demo[(page - 1) * j + i + 1].blogDate + '</span>\n' +
                                '            </div>\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '</div>')
                        }
                        var ym = Math.ceil(demo.length / i);//计算总页数 根据数据长度 向下取整
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < ym - 1); //假设总页数为   ym-1 避免 20/3 = 7 ..1 导致错误
                    }, 300);
                })
            }
        });
    });
</script>
</body>
</html>